<template>
	<view class="user-permit">
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<u--form labelWidth="35%" labelPosition="left" :model="model1" :rules="rules" ref="uForm">
			<u-form-item label="手机号" prop="params.mobile" borderBottom ref="item1">
				<u--input v-model="model1.params.mobile" placeholder="请输入手机号" border="none"></u--input>
			</u-form-item>
			<u-form-item label="身份证号" prop="params.idcard_number" borderBottom ref="item1">
				<u--input v-model="model1.params.idcard_number" placeholder="请输入身份证号" border="none"></u--input>
			</u-form-item>
			<u-form-item label="身份 证图片" ref="item1">
			</u-form-item>
		</u--form>
		<!-- 自己写一个布局 -->
		<view class="image-items">
			<view class="item">
				<view class="item-title">
					正面
				</view>
				<view class="">
					<nt-upload :images="model1.params.idcard_images" @success="successUpload" :maxCount="1"></nt-upload>
				</view>
			</view>
			<view class="item">
				<view class="item-title" style="text-align: right;">
					示例
				</view>
				<view class="">
					<u--image mode="widthFix" :showLoading="true" src="/static/image/idcard-behind.png" width="200rpx"
						@click="click"></u--image>
				</view>
			</view>
		</view>
		<view class="image-items">
			<view class="item">
				<view class="item-title">
					反面
				</view>
				<view class="">
					<nt-upload :images="model1.params.idcard_images2" @success="successUpload2"
						:maxCount="1"></nt-upload>
				</view>
			</view>
			<view class="item">
				<view class="item-title" style="text-align: right;">
					示例
				</view>
				<view class="">
					<u--image mode="widthFix" :showLoading="true" src="/static/image/idcard-front.png" width="200rpx"
						@click="click"></u--image>
				</view>
			</view>
		</view>
		<view class="image-items">
			<view class="item">
				<view class="item-title">
					个人照片
				</view>
				<view class="">
					<nt-upload :images="model1.params.header_images" @success="successUpload3"
						:maxCount="1"></nt-upload>
				</view>
			</view>
		</view>
		<view class="button-box">
			<u-button type="primary" @tap="submit">确认</u-button>
		</view>
	</view>
</template>

<script>
	import {
		getUserPermit,
		postUserPermit
	} from '@/api'
	export default {
		onLoad() {
			this.getPermit()
		},
		data() {
			return {
				model1: {
					params: {
						mobile: '',
						idcard_number: "",
						idcard_images: [],
						idcard_images2: [],
						header_images: []
					}
				},
				previewImage: [],
				previewImage2: [],
				previewImage3: [],
				rules: {
					'params.mobile': [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change', 'blur'],
						}
					],
					'params.idcard_number': [{
							required: true,
							message: '请输入身份证号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								return uni.$u.test.idCard(value)
							},
							message: '身份证号码不正确',
							trigger: ['change', 'blur'],
						}
					]
				},
			};
		},
		methods: {
			async submit() {
				this.$refs.uForm.validate().then(async res => {
					let params = JSON.parse(JSON.stringify(this.model1.params))
					params.idcard_images = params.idcard_images.map(o => o.url || o)
					params.idcard_images2 = params.idcard_images2.map(o => o.url || o)
					params.header_images = params.header_images.map(o => o.url || o)
					let {
						code,
						msg
					} = await postUserPermit(params)
					if (code === 1) {
						this.toast(msg)
						setTimeout(() => this.back(), 1000)
					}
				})
			},
			async getPermit() {
				let {
					code,
					data
				} = await getUserPermit()
				if (code === 1 && data) {
					for (let key in this.model1.params) {
						this.model1.params[key] = data[key]
					}
				} else {
					this.model1.params.mobile = this.$store?.state?.user?.userInfo?.mobile
				}
			},
			successUpload(e) {
				this.model1.params.idcard_images = e.map(o => o.url)
			},
			successUpload2(e) {
				this.model1.params.idcard_images2 = e.map(o => o.url)
			},
			successUpload3(e) {
				this.model1.params.header_images = e.map(o => o.url)
			},
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			// this.$refs.uForm.setRules(this.rules)
		},
	};
</script>
<style lang="scss" scoped>
	.user-permit {
		padding: 60rpx 30rpx 22rpx 30rpx;

		.image-items {
			display: flex;
			justify-content: space-between;
			height: 184rpx;
			margin: 50rpx 0;

			.item {
				&-title {
					margin-bottom: 20rpx;
				}
			}
		}
	}
</style>